<template>
    <el-dialog v-model="dialogVisible" :align-center="true" title="商品信息" width="800px" @close="handleClose">
        <el-form ref="formRef" :model="skuForm" :rules="rules" label-width="auto" label-position="right"
            require-asterisk-position="right">
            <el-form-item label="商品名称" required>
                <el-input v-model="skuForm.name" />
            </el-form-item>
            <el-form-item>
                <el-form-item label="商品简称">
                    <el-input v-model="skuForm.shortName" />
                </el-form-item>
                <el-form-item label="货号">
                    <el-input v-model="skuForm.productNo" />
                </el-form-item>
            </el-form-item>
            
            <el-form-item label="商品编码" required class="row">
                <div class="row">
                    <el-input v-model="skuForm.code" placeholder="编码(条码号)" />
                    <el-button type="success">生成条码号</el-button>
                </div>
            </el-form-item>
            <el-form-item class="row">
                <el-form-item label="售价(元)" required class="short-item">
                    <el-input v-model="skuForm.price" />
                </el-form-item>
                <el-form-item label="进货价" class="short-item">
                    <el-input v-model="skuForm.buyPrice" />
                </el-form-item>
                <el-form-item label="会员价" class="short-item">
                    <el-input v-model="skuForm.vipPrice" />
                </el-form-item>
            </el-form-item>

            <el-form-item label="进货商">
                <el-form-item class="short-item">
                    <el-select v-model="skuForm.supplierId" placeholder="选择进货商">
                        <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                或
                <el-form-item>
                    <el-input v-model="skuForm.supplierName" placeholder="输入进货商（新增）" />
                </el-form-item>
                <div>二选一</div>
            </el-form-item>
            <el-form-item label="生产日期" class="row">
                <el-date-picker v-model="skuForm.productDate" type="date" editable placeholder="选择生产日期"
                    value-format="YYYY-MM-DD" @change="onBirthChange" style="width:200px" />
                <el-form-item label="保质期" class="short-item">
                    <el-input v-model="skuForm.shelfLife" placeholder="天" />
                </el-form-item>
            </el-form-item>

            <el-form-item label="库存" class="row">
                <el-form-item class="short-item">
                    <el-input v-model="skuForm.stock" placeholder="" />
                </el-form-item>
                <el-form-item label="单位" class="short-item">
                    <el-input v-model="skuForm.unit" placeholder="" />
                </el-form-item>
            </el-form-item>

            <el-form-item label="状态" class="row">
                <el-radio-group v-model="skuForm.status">
                    <el-radio value="1" size="large">正常</el-radio>
                    <el-radio value="0" size="large">下架</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-button @click="submit" style="width: 100%;" type="primary">确认</el-button>
        </el-form>
    </el-dialog>
</template>

<script setup>
import SkuApi from '@/api/sku';
import { ElMessage } from 'element-plus';

const props = defineProps({
    visible: { type: Boolean, default: false },
    skuForm: {type: Object, default: null},
    supplierList: {type: Array, default: []}
});
const emit = defineEmits(["update:visible", "import-success"]);

const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => {
        emit("update:visible", val);
    }
});

let formRef = ref()
const rules = ref({
    name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
    code: [{ required: true, message: "请输入条码code", trigger: "blur" }],
    price: [{ required: true, message: "请输入售价", trigger: "blur" }]
})

function submit() {
    formRef.value.validate(ok => {
        if (ok) {
            SkuApi.addOrUpdate(props.skuForm).then(sku=>{
                emit("success", sku)
                ElMessage({message: "添加或更新商品成功！"})
            })
        }
    })
}

function handleClose(){
    dialogVisible.value = false
}

</script>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.short-item {
    margin: 0 8px;
    width: 160px
}
</style>